<template>
	<!-- 外层容器 -->
	<focus-box :width="width" height="70" :bg="color+'-light'" @click="compClick">
		
		<!-- 喇叭图标容器 -->
		<focus-box v-if="iconVolume==true||iconVolume=='true'"
		width="70" justify="center" align="center">
			<focus-icon name="fi-horn" size="30" :color="color"></focus-icon>
		</focus-box>
		
		<!-- 滚动区域容器 -->
		<view class="_focus-notice-box-rolling" :style="styleRollBox">
			<!-- 执行动画(向左移动)容器 -->
			<view class="_focus-notice-box-animation">
				<!-- 显示文字 -->
				<text class="_focus-notice-text" :class="classText">{{text}}</text>
			</view>
		</view>
		
		<!-- 更多图标容器 -->
		<focus-box v-if="iconMore==true||iconMore=='true'"
		width="50" justify="center" align="center">
			<focus-icon name="fi-right" size="30" :color="color"></focus-icon>
		</focus-box>
		
	</focus-box>
</template>


<script>
	// node节点信息获取(异步方法)
	import nodeInfo from '../../lib/sys/nodeInfo.js';
	// 布局容器 组件引入
	import focusBox from '../focus-box/focus-box.vue';
	// 字体图标 组件引入
	import focusIcon from '../focus-icon/focus-icon.vue';
	
	/**
	 * 滚动通知栏
	 * @description vue/nvue通用，一般用于长文字消息提示
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-notice
	 * @property {String,Number} width 通知栏宽度(rpx)，默认：750
	 * @property {String} text 通知文字内容
	 * @property {String} color = [primary|success|warning|error|info] 通知栏主题颜色，默认：primary
	 *   @value primary 基本主体色
	 *   @value success 完成色
	 *   @value warning 警告色
	 *   @value error 错误色
	 *   @value info 信息色
	 * @property {String,Boolean} iconVolume = [false|true] 是否开启左侧喇叭图标，默认：true
	 *   @value true 启用关闭按钮
	 *   @value false 取消关闭按钮
	 * @property {String,Boolean} iconMore = [false|true] 是否开启右侧更多图标，默认：true
	 *   @value true 启用关闭按钮
	 *   @value false 取消关闭按钮
	 * @event {Function} click 点击标签触发
	 */
	export default {
		name: "focus-notice",
		// 组件需要获取数据
		props: {
			"tag": { type: String, default: 'focus-notice' },
			"width": { type: [String,Number], default: 750 },
			"text": { type: String, default: '' },
			"color": { type: String, default: 'primary' },
			"iconVolume": { type: [String,Boolean], default: true },
			"iconMore": { type: [String,Boolean], default: true },
		},
		
		// 组件定义
		components: {
			focusBox,
			focusIcon,
		},
		
		// 页面数据
		data() {
			return {
				// 滚动区域外层宽度
				width_rolling: 0, // 单位：px
				// 滚动文本容器宽度
				width_animation: 0, // 单位：px
			}
		},
		
		// 计算属性
		computed: {
			// 滚动区域容器style
			styleRollBox() {
				var obj_style = {};
				
				// 如果
				if (this.width != null && Number(this.width) >= 200)
				{
					// 通知栏总宽度
					var num_width = Number(this.width);
					// 减去喇叭容器宽度
					if (this.iconVolume==true || this.iconVolume=='true') { num_width = num_width - 70; }
					// 减去更多容器宽度
					if (this.iconMore==true || this.iconMore=='true') { num_width = num_width - 50; }
					// 滚动区域容器宽度
					obj_style['width'] = num_width + 'rpx';
				}
				
				return obj_style;
			},
			// 标签文字class
			classText() {
				var arr_class = [];
				
				// 文字颜色
				if (this.color.length)
				{
					// 内置文字颜色
					arr_class.push('_focus-notice-color-'+this.color);
				}
				
				return arr_class; 
			}
		},
		
		// 页面事件
		methods: {
			
			// ================================== 元素事件
			// 通知栏 点击
			compClick() {
				// 点击事件回调触发
				this.$emit('click', { "tag": this.tag });
			},
			
		},
		
	}
</script>


<style lang="scss">
	
	/* 滚动区域容器 */
	._focus-notice-box-rolling{ flex: 1; flex-direction: row; overflow: hidden; }
	
	/* 执行动画的容器 */
	._focus-notice-box-animation{ flex-direction: row; justify-content: flex-start;
		/* #ifndef APP-NVUE */
			display: flex; box-sizing: border-box;
		/* #endif */
		animation-name: zdo_rotate_0_360;
		animation-duration: 8s;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
	@keyframes zdo_rotate_0_360{
		0%{ transform: translateX(100%); }
		100%{ transform: translateX(-100%); }
	}
	
	/* 滚动文字 */
	._focus-notice-text{ font-size: 28rpx; line-height: 34rpx;
		/* 将文字固定为一行 */
		/* #ifdef APP-NVUE */
			lines: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
			white-space: nowrap;
		/* #endif */
	}
	
	/* 内置文字颜色 */
	._focus-notice-color-primary{ color: $focus-color-primary; }
	._focus-notice-color-success{ color: $focus-color-success; }
	._focus-notice-color-warning{ color: $focus-color-warning; }
	._focus-notice-color-error{ color: $focus-color-error; }
	._focus-notice-color-info{ color: $focus-color-info; }
	
</style>